@import "../../../core/index";
.modal-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    background-color: rgba(0,0,0,.4);
    .user-cover-wrapper {
        width: 600/@remScale;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        .header-wrapper {
            width: 100%;
            display: flex;
            height: 70/@remScale;
            background: @white;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 20/@remScale;
            align-items: center;
            .title-wrapper {
                color: #333333;
                font-size: 16/@remScale;
                user-select: none;
                & > span:nth-last-child(1){
                    margin-left: 2/@remScale;
                    color: #999999;
                    font-size: 12/@remScale;
                }
            }
            .icon-wrapper{
                cursor:pointer;
                .icon{
                    width: 14/@remScale;
                    height: 14/@remScale;
                    color: @pinkish-grey;
                }
            }
        }

        .content-wrapper{
            width: 100%;
            max-height: 350/@remScale;
            padding: 40/@remScale 20/@remScale;
            position: relative;
            background-color: @background-color;
            display: flex;
            justify-content: center;
            text-align: center;
            img{
                z-index: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            .img-pc-wrapper{
                width: 60%;
                height: auto;
                position: relative;
                .edit-cover-btn{
                    width: 100%;
                    height: 34/@remScale;
                    background-color: rgba(0,0,0,.6);
                    color:@white;
                    z-index: 1;
                    cursor:pointer;
                    position: absolute;
                    bottom: 0;
                    font-size: 12/@remScale;
                    line-height: 34/@remScale;
                    text-align: center;
                    &:hover{
                        background-color:rgba(0,0,0,.8);
                    }
                }
            }
        }

        .footer-wrapper{
            width:100%;
            height: 70/@remScale;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14/@remScale;
            background-color: @white;
            .btn-left{
                width: 130/@remScale;
                height: 40/@remScale;
                line-height: 40/@remScale;
                text-align: center;
                border-radius: 4/@remScale;
                border: 1/@remScale solid @black-auxiliary;
                color: @black-auxiliary;
                margin-right: 60/@remScale;
                cursor: pointer;
                opacity: .8;
                &:hover{
                    opacity: 1;
                }
            }
            .btn-right{
                width: 130/@remScale;
                height: 40/@remScale;
                background-color: @light-blue-color;
                color: @white;
                border-radius: 4/@remScale;
                text-align: center;
                line-height: 40/@remScale;
                cursor: pointer;
                opacity: .8;
                &:hover{
                    opacity: 1;
                }
            }
        }

    }
}
